<template>
  <el-container>
    <el-header>
      <Header></Header>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <Aside></Aside>
      </el-aside>
      <el-main>
        <h3 style="text-align: center">文章列表</h3>

        <el-form
          :inline="true"
          :model="search"
          class="demo-form-inline"
          style="width: 99%; margin: 0 auto; text-align: center"
        >
          <el-form-item label="ID">
            <el-input v-model="search.itemid"></el-input>
          </el-form-item>

          <el-form-item label="分类">
            <el-select v-model="search.catid">
              <el-option :key="0" :value="0" label="请选择">请选择</el-option>
              <el-option
                :key="item.catid"
                :value="item.catid"
                :label="item.catname"
                v-for="item in category_select"
              >
                {{
                  "&nbsp;&nbsp;&nbsp;&nbsp;".repeat(item.lev) +
                  "┖─&nbsp;" +
                  item.catname
                }}
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="标题">
            <el-input v-model="search.title"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="search.flag">
              <el-option label="请选择" value="0"></el-option>
              <el-option
                v-for="item in $core_enums('flag')"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="to_search">查询</el-button>
            <el-button type="warning" @click="to_reset">重置</el-button>
            <el-button type="success" @click="to_export">导出Excel</el-button>
          </el-form-item>
        </el-form>

        <el-table
          v-loading="loading"
          :data="tableData"
          @selection-change="handleSelectionChange"
          style="width: 99%; margin: 0 auto"
          border
        >
          <el-table-column type="selection" width="55"></el-table-column>

          <el-table-column
            prop="itemid"
            label="ID"
            width="180"
          ></el-table-column>

          <el-table-column prop="cat_pos" label="分类" width="180">
            <template slot-scope="scope">
              <span v-html="scope.row.cat_pos"></span>
            </template>
          </el-table-column>

          <el-table-column prop="title" label="标题" width="180">
            <template slot-scope="scope">
              <a
                href="javascript:void(0);"
                @click="handlePreview(scope.$index, scope.row)"
                >{{ scope.row.title }}</a
              >
            </template>
          </el-table-column>

          <el-table-column prop="addtime" label="添加时间"></el-table-column>

          <el-table-column prop="edittime" label="编辑时间"></el-table-column>

          <el-table-column prop="username" label="添加人"></el-table-column>

          <el-table-column prop="editor" label="编辑人"></el-table-column>

          <el-table-column prop="flag" label="状态"></el-table-column>

          <el-table-column align="right">
            <template slot="header" slot-scope="scope">操作</template>
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <div style="width: 90%; margin: 0 auto; text-align: center">
          分类：
          <el-select v-model="batch.catid">
            <el-option :key="0" :value="0" label="请选择">请选择</el-option>
            <el-option
              :key="item.catid"
              :value="item.catid"
              :label="item.catname"
              v-for="item in category_select"
            >
              {{
                "&nbsp;&nbsp;&nbsp;&nbsp;".repeat(item.lev) +
                "┖─&nbsp;" +
                item.catname
              }}
            </el-option>
          </el-select>
          <el-button type="success" @click="batch_update_catid"
            >选中项修改分类</el-button
          >状态：
          <el-select v-model="batch.flag">
            <el-option label="请选择" value="0"></el-option>
            <el-option
              v-for="item in $core_enums('flag')"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            ></el-option>
          </el-select>
          <el-button type="success" @click="batch_update_flag"
            >选中项修改状态</el-button
          >
        </div>
        <br />
        <el-pagination
          background
          :total="total"
          :page-size="20"
          :current-page.sync="search.page"
          @current-change="handleCurrentChange"
          style="text-align: center"
        ></el-pagination>
        <br />
        <br />

        <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose"
        >
          <span>正在导出Excel，当前进度：{{ export_percent }}</span>
          <span v-if="show_download">
            <a :href="download_url">下载</a>
          </span>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogVisible = false"
              >关闭</el-button
            >
          </span>
        </el-dialog>
      </el-main>
    </el-container>
    <el-footer>
      <Footer></Footer>
    </el-footer>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      search: {
        page: 1,
        itemid: "",
        catid: 0,
        title: "",
        flag: "0",
      },
      category_select: [],
      loading: false,
      tableData: [],
      total: 0,
      checked_items: [],
      batch: {
        catid: 0,
        flag: "0",
      },
      dialogVisible: false,
      export_percent: "",
      show_download: false,
      download_url: "",
    };
  },
  async mounted() {
    let data_category = await this.$axios.post("/api/article/category_lst");
    this.category_select = data_category.data;
    this.load_data();
  },
  methods: {
    handleSelectionChange(val) {
      this.checked_items = val;
    },
    //加载数据
    load_data(cb) {
      this.loading = true;
      this.$axios
        .post("/api/article/lst", {
          page: this.search.page,
          itemid: this.search.itemid,
          catid: this.search.catid,
          title: this.search.title,
          flag: this.search.flag,
        })
        .then((data) => {
          this.loading = false;
          this.tableData = data.data.rows;
          this.total = data.data.total;
          if (cb) {
            cb();
          }
          this.$forceUpdate();
        })
        .catch((error) => {
          this.loading = false;
          this.$message.error(error.toString());
        });
    },
    //分页点击
    handleCurrentChange(page) {
      this.search.page = page;
      this.load_data();
    },
    //搜索
    to_search() {
      var c = 0;
      if (parseInt(this.search.itemid) > 0) {
        c++;
      }
      if (parseInt(this.search.catid) > 0) {
        c++;
      }
      if (this.search.title.length > 0) {
        c++;
      }
      if (parseInt(this.search.flag) > 0) {
        c++;
      }
      if (!c) {
        this.$message.error("请输入搜索条件！");
        return;
      }
      this.search.page = 1;
      this.load_data();
    },
    //重置
    to_reset() {
      this.search = {
        page: 1,
        itemid: "",
        catid: 0,
        title: "",
        flag: "0",
      };
      this.load_data();
    },
    //导出Excel
    to_export() {
      let request = async (filename, page) => {
        try {
          let data = await this.$axios.post("/api/article/lst", {
            is_export: 1,
            filename: filename,
            page: page,
            itemid: this.search.itemid,
            catid: this.search.catid,
            title: this.search.title,
            flag: this.search.flag,
          });

          this.dialogVisible = true;
          this.export_percent = data.data.progress;
          if (data.data.status) {
            this.show_download = true;
            this.download_url = data.data.browser_path;
            return;
          }
          //下一页
          request(data.data.filename, page + 1);
        } catch (error) {
          this.$message.error(error.toString());
        }
        return true;
      };

      this.export_percent = "";
      this.show_download = false;
      this.download_url = "";
      request("", 1);
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    //预览
    handlePreview(index, row) {
      this.$router.push({
        path: "/article/preview",
        query: { itemid: row.itemid },
      });
    },
    //编辑
    handleEdit(index, row) {
      this.$router.push({
        path: "/article/mod",
        query: { itemid: row.itemid },
      });
    },
    //删除
    handleDelete(index, row) {
      this.$router.push({
        path: "/article/del",
        query: { itemid: row.itemid },
      });
    },
    //批量更新
    batch_update_catid() {
      if (!this.checked_items.length) {
        this.$message.error("请勾选数据！");
        return;
      }
      if (!parseInt(this.batch.catid)) {
        this.$message.error("请选择状态！");
        return;
      }
      var itemids = this.checked_items.map(function (v, k) {
        return v.itemid;
      });
      this.$axios
        .post("/api/article/batch_update", {
          action: "catid",
          itemids: itemids,
          catid: this.batch.catid,
        })
        .then((data) => {
          if (parseInt(data.code) > 0) {
            this.batch.catid = 0;
            this.$message({
              type: "success",
              message: "操作成功!",
            });
            setTimeout(() => {
              this.load_data();
            }, 500);
          } else {
            this.$message({
              type: "error",
              message: "操作失败!",
            });
          }
        })
        .catch((error) => {
          this.$message.error(error.toString());
        });
    },
    batch_update_flag() {
      if (!this.checked_items.length) {
        this.$message.error("请勾选数据！");
        return;
      }
      if (!parseInt(this.batch.flag)) {
        this.$message.error("请选择状态！");
        return;
      }
      var itemids = this.checked_items.map(function (v, k) {
        return v.itemid;
      });
      this.$axios
        .post("/api/article/batch_update", {
          action: "flag",
          itemids: itemids,
          flag: this.batch.flag,
        })
        .then((data) => {
          if (parseInt(data.code) > 0) {
            this.batch.flag = "0";
            this.$message({
              type: "success",
              message: "操作成功!",
            });
            setTimeout(() => {
              this.load_data();
            }, 500);
          } else {
            this.$message({
              type: "error",
              message: "操作失败!",
            });
          }
        })
        .catch((error) => {
          this.$message.error(error.toString());
        });
    },
  },
};
</script>

<style scoped>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
}

.el-main {
  color: #333;
}
</style>
